<template>
  <div class="icons-wrapper">
    <swiper class="icons-swiper" :options="swiperOption" ref="mySwiper">
      <!-- slides1 -->
      <swiper-slide v-for="(page, idx) in pages" :key="idx">
        <div class="icon-box" v-for="item in page" :key="item.id">
          <div class="icon-img-box">
            <img class="img" :src="item.imgUrl" />
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeIcons",
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination", //分页器圆点
        loop: true, //设置虚幻轮播，无缝
        autoplay: false
      },
      iconsList: [
        {
          id: "001",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          desc: "景点门票"
        },
        {
          id: "002",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
          desc: "东莞必游"
        },
        {
          id: "003",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
          desc: "泡温泉"
        },
        {
          id: "004",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
          desc: "植物园"
        },
        {
          id: "005",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/184e261814a5d07a5d3d08cd29cf590d.png",
          desc: "长隆度假区"
        },
        {
          id: "006",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png",
          desc: "东莞观音山"
        },
        {
          id: "007",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cba147cf6cfcea7109d0bff6aac6f626.png",
          desc: "香市动物园"
        },
        {
          id: "008",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/90/59a2f523ee2f9202.png",
          desc: "隐贤山庄"
        },
        {
          id: "009",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/8c/47630407f70e8302.png",
          desc: "龙凤山庄"
        },
        {
          id: "010",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/bda58ffc3016edad84e656e8a94b0321.png",
          desc: "广州融创广州融创广州融创广州融创"
        }
      ]
    };
  },
  computed: {
    pages: function() {
      var pages = [];
      this.iconsList.forEach((elem, idx) => {
        var page = Math.floor(idx / 8); //以下标为8分页，第一页有8项
        if (!pages[page]) {
          //赋值数组
          pages[page] = [];
        }

        pages[page].push(elem); //组装列表
      });
      return pages;
      console.log(page);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

.icons-wrapper {
  width: 100%;
  height: 3.7rem;
  padding-top: 0.1rem;
  background-color: #eee;
}

.icons-wrapper .icons-swiper {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.icons-wrapper .icons-swiper >>> .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
}

.icons-wrapper .icon-box {
  position: relative;
  float: left;
  width: 25%;
  height: 1.5rem;
  padding-top: 0.1rem;
}

.icons-wrapper .icon-box .icon-img-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.44rem;
}

.icons-wrapper .icon-box .icon-img-box .img {
  display: block;
  height: 100%;
  margin: 0 auto;
}

.icons-wrapper .icon-box .icon-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  color: $darkTextColor;
  ellipsis();
}
</style>